<template>
    <div>
        <el-card>
            <template #header>
                <div class="header-content">
                    <span class="title">生产报表详情</span>
                </div>
            </template>

            <!-- 基本信息 -->
            <el-form :model="formData" label-width="100px" class="base-info-form">
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="报工编码">
                            <el-input v-model="formData.reportCode" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="任务ID">
                            <el-input v-model="formData.taskId" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="计划ID">
                            <el-input v-model="formData.productionPlanId" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="报工时间">
                            <el-input v-model="formData.reportTime" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item label="产品ID">
                            <el-input v-model="formData.materialId" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="产品名称">
                            <el-input v-model="formData.materialName" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="规格型号">
                            <el-input v-model="formData.specificationsAndModels" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                         <el-form-item label="报工人">
                            <el-input v-model="formData.reportPeopleId" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                         <el-form-item label="质检员">
                            <el-input v-model="formData.checkId" readonly style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="状态">
                    <el-tag :type="getStatusType(formData.status)">
                        {{ getStatusText(formData.status) }}
                    </el-tag>
                </el-form-item>
            </el-form>

            <!-- 统计信息 -->
            <el-row :gutter="20" class="stats-row">
                <el-col :span="8">
                    <el-statistic title="总数量" :value="formData.totalQuantity || 0" />
                </el-col>
                <el-col :span="8">
                    <el-statistic title="合格数量" :value="formData.qualifiedQuantity || 0" />
                </el-col>
                <el-col :span="8">
                    <el-statistic title="缺陷数量" :value="formData.defectQuantity || 0" />
                </el-col>
            </el-row>

            <!-- 工序明细表格 -->
            <!-- <div class="section-title">工序明细</div>
            <el-table :data="processDetails" border style="width: 100%" class="process-table">
                <el-table-column prop="processName" label="工序名称" min-width="120" />
                <el-table-column prop="processIllustrate" label="工序说明" min-width="150" />
                <el-table-column prop="materialName" label="物料名称" min-width="120" />
                <el-table-column prop="specificationsAndModels" label="规格型号" min-width="120" />
                <el-table-column prop="productionReportDetails[0].plannedQuantity" label="计划数量" width="100"
                    align="center" />
                <el-table-column prop="productionReportDetails[0].reportedQuantity" label="上报数量" width="100"
                    align="center" />
                <el-table-column prop="productionReportDetails[0].qualifiedQuantity" label="合格数量" width="100"
                    align="center">
                    <template #default="{ row }">
                        <span style="color: #67c23a;">{{ row.productionReportDetails[0].qualifiedQuantity }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productionReportDetails[0].defectQuantity" label="缺陷数量" width="100"
                    align="center">
                    <template #default="{ row }">
                        <span style="color: #f56c6c;">{{ row.productionReportDetails[0].defectQuantity }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合格率" width="100" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getRateTagType(row.processPassRate)" size="small">
                            {{ row.processPassRate }}%
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="processTeam" label="负责班组" width="120" />
                <el-table-column prop="productionReportDetails[0].createTime" label="创建时间" width="150">
                    <template #default="{ row }">
                        {{ formatDateTime(row.productionReportDetails[0].createTime) }}
                    </template>
                </el-table-column>
            </el-table> -->

            <!-- 物料汇总 -->
            <!-- <div class="section-title">物料汇总</div>
            <el-table :data="materialSummary" border style="width: 100%">
                <el-table-column prop="material_name" label="物料名称" />
                <el-table-column prop="specifications_and_models" label="规格型号" />
                <el-table-column prop="unit" label="单位" width="80" align="center" />
                <el-table-column prop="total_quantity" label="总用量" width="100" align="center" />
                <el-table-column label="使用率" width="100" align="center">
                    <template #default="{ row }">
                        {{ calculateUsageRate(row) }}%
                    </template>
                </el-table-column>
            </el-table> -->
        </el-card>
    </div>
</template>

<script setup>
import { ref, defineEmits, onMounted, defineProps } from 'vue'
import request from '@/api/request'


const props = defineProps(["data"])

const emit = defineEmits(['update:visible'])

const formData = ref({ ...props.data })

const processDetails = ref([])
const materialSummary = ref([])



// 状态类型映射
const getStatusType = (status) => {
    const map = { 0: 'danger', 1: 'success', 2: "warning" }
    return map[status] || 'info'
}

const getStatusText = (status) => {
    const map = { 0: '未确认', 1: '已确认', 2: "已取消" }
    return map[status] || '未知状态'
}

// 合格率样式
const getPassRateStyle = (rate) => {
    if (rate >= 95) return { color: '#67c23a' }
    if (rate >= 85) return { color: '#e6a23c' }
    return { color: '#f56c6c' }
}

const getRateTagType = (rate) => {
    if (rate >= 95) return 'success'
    if (rate >= 85) return 'warning'
    return 'danger'
}

// 格式化时间
const formatDateTime = (dateString) => {
    if (!dateString) return ''
    return new Date(dateString).toLocaleString('zh-CN')
}

// 计算物料使用率
const calculateUsageRate = (material) => {
    // 这里需要根据业务逻辑计算使用率
    return '100' // 示例值
}


// 加载数据
const loadData = () => {
    request({
        url: '/report/detail',
        method: 'GET',
        params: { reportId: props.data.reportId }
    }).then(res => {
        processDetails.value = res.data
        console.log(processDetails.value)
    })
}
onMounted(loadData)


</script>

<style scoped>
.production-report-dialog {
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title {
        font-size: 20px;
        font-weight: bold;
        color: #409EFF;
    }

    .base-info-form {
        margin-bottom: 20px;
    }

    .stats-row {
        margin: 20px 0;

        :deep(.el-statistic__content) {
            font-size: 24px;
            font-weight: bold;
        }
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0 10px 0;
        color: #606266;
        border-left: 4px solid #409EFF;
        padding-left: 10px;
    }

    .process-table {
        margin-bottom: 20px;
    }

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
}

:deep(.el-card__header) {
    background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
    border-bottom: 1px solid #ebeef5;
}
</style>